<template>
	<view class="container">
		<view class="avatar">
			<!-- 上传组件 -->
			<u-upload name="product_img" :maxCount="1" :fileList="filelist" width="100" height="100" @delete="del"
				@afterRead="read" />
		</view>

		<view class="content">
			<u-form labelPosition="left" labelWidth="60" :model="carwashtypelist" :rules="rules" ref="product">
			
				<!-- 名称 -->
				<u-form-item label="标题" prop="name">
					<u-input v-model="carwashtypelist.name" placeholder="请输入服务类型名称" />
				</u-form-item>
				
				<!-- 服务分类创建时间 -->
				<u-form-item label="创建时间" prop="createtime_text">
					<u-input v-model="carwashtypelist.createtime_text" disabled  />
				</u-form-item>



			<!-- 提交按钮 -->
			<u-button text="修改分类服务" icon="pushpin" size="small" type="primary" :customStyle="btnStyle" @click="product" />
		</u-form>

		</view>
		<!-- 消息提醒 -->
		<u-toast ref="notice"></u-toast>
	</view>
</template>
  
<script>
export default {
	onLoad(options) {
		this.auth = this.$u.auth.check();

		this.carwashtypeid = options.carwashtypeid ? options.carwashtypeid : 0;
		this.stoid = options.stoid ? options.stoid : 0;

		this.list();

	},

	onReady() {

		this.$refs.product.setRules(this.rules)


	},
	created() {

		this.timer = setInterval(() => {

			let a = this.$u.count.check()

		}, 15000);

	},
	beforeDestroy() {
		clearInterval(this.timer)
	},
	data() {
		return {
			filelist: [],
			showstore: false,
			auth: {},
			vediolist: [],
			carwashtypeid: 0,
			newthumbArr:[],
			stoid: "",
			thumbs_text: "",
			name: "",
			carwashtypelist:{
				id:0,
				name:"",
				createtime_text:"",
				image_text:"",
			},
			piclist: [],

			rules: {
				
				name: {
					required: true,
					message: "请填写服务类型名称",
					trigger: ["blur", "change"],
				},
				createtime_text: {
					required: true,
					message: "服务类别创建时间不能为空",
					trigger: ["blur", "change"],
				},
				
			},
				
			
		};
	},

	methods: {

		async read(event) {

			//组装上传数据
			var data = {
				filePath: event.file.thumb,
				name: "product_img",
				header: {},

			};

			//调用接口
			var result = await this.$u.api.product.thumbs(data);

			if (result.code) {

				this.newthumbArr = this.newthumbArr.concat(result.data)

				this.carwashtypelist.image_text = result.data
				// 合并对象
				this.filelist = [
					{ url: result.data }
				]
				return false


			} else {
				this.$refs.notice.show({
					type: "error",
					message: result.msg,
				});
				return false;
			}
		},

		product() {
			this.$refs.product.validate().then(async () => {

				var data = {
					id: this.carwashtypeid,
					name: this.carwashtypelist.name,
					adminid: this.auth.id,
					image: this.carwashtypelist.image_text,
					newthumbArr:this.newthumbArr

					
				};


				let result = await this.$u.api.product.carwashtypeedit(data);

				if (result.code) {
					this.$refs.notice.show({
						type: "success",
						message: result.msg,
						duration: 1000,
						complete: () => {
							//返回上一个界面
							uni.$u.route({
								type: "redirectTo",
								url: "/pagesC/product/gsservices/servicetype/index",
								params:{
									stoid:this.stoid
								}
								
							})
						}
					});
				} else {
					this.$refs.notice.show({
						type: "error",
						message: result.msg,
						duration: 2000,

					});
				}
			})
				.catch(() => {
					uni.$u.toast("效验失败");
				});



		},
		async del(e) {
			let data = {
				adminid: this.auth.id,
				carwashtypeid: this.carwashtypeid,
				url: e.file.url
			}

			var result = await this.$u.api.product.delimage(data)

			if (result.code) {
				this.$refs.notice.show({
					type: "success",
					message: result.msg,
					duration: 1000,
					complete: () => {

						if (e.index == 0) {
							this.filelist.splice(e.index, e.index)

							this.filelist = []
						}
					}
				})

			} else {
				this.$refs.notice.show({
					type: "error",
					message: result.msg,
					duration: 1000,

				}
				)
			}



		},

		async list() {
			let data = {
				carwashtypeid: this.carwashtypeid,
				adminid:this.auth.id
			};
			let result = await this.$u.api.product.carwashtypeinfo(data);
			if (result.code) {

				this.carwashtypelist = result.data


				if (this.carwashtypelist.image_text) {
					// 把一维数组循环出来然后组装一个自己想要的结构
					this.filelist = [
						{ url: this.carwashtypelist.image_text }

					]
				}

			} else {
				this.$refs.notice.show({
					type: "warning",
					message: result.msg,
				});
			}
		},
	},
};
</script>
  
<style >
.content {
	padding: 20px;
}

.container {
	height: 100%;
	margin: 0 50rpx;
	box-sizing: border-box;
}

.avatar {
	text-align: center;
}

.u-avatar {
	margin: 80rpx auto 40rpx;
}

.xcx {
	width: 200rpx;
	height: 200rpx;
	margin: 80rpx auto 40rpx;
	border-radius: 100%;
	overflow: hidden;
}

.nickname {
	font-size: 14px;
	text-align: center;
}

.title {
	text-align: center;
	margin: 40rpx 0;
	font-size: 14rpx;
}

.avatar .u-upload {
	justify-content: center;
	align-items: center;
	margin: 3em auto;
}

.vedio .u-upload {
	justify-content: center;
	align-items: center;
	margin: 0.3em auto;
}

.vedio {
	text-align: center;
}

.u-vedio {
	margin: 80rpx auto 40rpx;
}
</style>
  